<template>
  <div id="mv_details">
    <!-- 播放窗口比为1:0.56 -->
    <div class="player_box">
      <video-player data-setup='{ "techOrder": ["flash"] }'
        :style="{ backgroundImage: `url(${mvBackGroung})` }"
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
      <!-- @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)" -->
    </div>
    <!-- <pre></pre> -->
    <!-- mv详情内容 -->
    <div class="details_content">
      <div class="top">
        <div class="left">
          <span>mv</span>
          <p>{{ mv_details.name }}</p>
        </div>
        <i
          :class="[
            isTrue
              ? 'iconfont icon-xiasanjiaoxing'
              : 'iconfont icon-shangsanjiaoxing',
          ]"
          @click="isShow"
          v-if="mv_details.desc"
        ></i>
      </div>
      <div class="middle">
        <p>歌手：{{ mv_details.artistName }}</p>
      </div>
      <div class="bottom">
        <span>发布时间：{{ mv_details.publishTime }}</span>
        <span>播放：{{ convert_unit(mv_details.playCount) }}</span>
      </div>
      <div class="mv_introduction" v-if="isTrue == false">
        {{ mv_details.desc }}
      </div>
    </div>

    <!-- 相关推荐 -->
    <div class="recommend_box">
      <p>相关推荐</p>
      <div
        class="recommend_content"
        v-for="(item, idx) in mv_recommend"
        :key="idx"
      >
        <div class="img_box">
          <img :src="item.coverUrl" alt="" />
        </div>
        <div class="txt_content">
          <p><span v-if="item.type == 0">mv</span>{{ item.title }}</p>
          <span>{{ formatDate(item.durationms) }}，by {{ item.creator[0].userName }}</span>
        </div>
      </div>
    </div>

    <!-- 评论 -->
    <div class="comment_box">
      <p>精彩评论</p>
      <div class="comment" 
      v-for="item in mv_comments" 
      :key="item.time"
      >
        <div class="head_photo">
          <div class="img_box">
            <img :src="item.user.avatarUrl" alt="">
          </div>
        </div>
        <div class="comment_details">
          <div class="name_time_like_box">
            <div class="name_time_box">
              <p>
                {{item.user.nickname}}
              </p>
              <span>{{formatDate(item.time)}}</span>
            </div>
            <div class="like_box">
              <span>{{item.likedCount}}</span>
              <i class="iconfont icon-dz"></i>
            </div>
          </div>
          <div class="comment_content">
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
      <div class="comments_sum">
        <p>查看全部{{mv_comments_sum}}条评论</p>
        <i class="iconfont icon-iconfontjiantou5"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from "@/assets/http/api.js";
import { videoPlayer } from "vue-video-player";
export default {
  data() {
    return {
      mv_details: {
        name:'',
        desc:'',
        artistName:'',
        publishTime:'',
        playCount:''
      },
      mv_recommend: null,
      mv_comments:null,
      mv_comments_sum: null,
      isTrue: true,
      del_boder:false,
      mvBackGroung: null,
      playerOptions: {
        // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: '', //你的视频地址（必填）
            // "http://vodkgeyttp8.vod.126.net/cloudmusic/obj/core/2705024167/d41ee91a3977fbc93ce7deedc65e5a12.mp4?wsSecret=bab0513a7788d422533fdaff3c4d6621&wsTime=1592905394"
          },
        ],
        poster: "poster.jpg", //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        //        controlBar: {
        //          timeDivider: true,
        //          durationDisplay: true,
        //          remainingTimeDisplay: false,
        //          fullscreenToggle: true  //全屏按钮
        //        }
      },
    };
  },
  created()  {
    this.$axios(api.get_mv_details + this.$route.query.mvId).then((res) => {
      this.mv_details = res.data.data;
      this.mvBackGroung = this.mv_details.cover;
      this.playerOptions.sources[0].src = this.mv_details.brs[240];
    });
    this.$axios(api.get_mv_recommend + this.$route.query.mvId).then((res) => {
      this.mv_recommend = res.data.data;
    });
    this.$axios(api.get_mv_comments + this.$route.query.mvId).then((res)=>{
      this.mv_comments = res.data.hotComments;
      this.mv_comments_sum = res.data.total;
      console.log(res.data,this.mv_comments);
    })
  },
  components: {
    videoPlayer,
  },
  methods: {
    isShow() {
      this.isTrue = !this.isTrue;
    },
    // onPlayerPlay(player) {
    //   console.log(player);
    //   // alert("play");
    // },
    // onPlayerPause(player) {
    //   console.log(player);
    //   // alert("pause");
    // },
    // 播放量转为万为单位
    convert_unit(num){
      let numStr = num.toString();
      if(numStr.length >= 9){
        return Math.floor((num/100000000)*10)/10 + "亿";
      }else if(numStr.length >= 5 && numStr.length < 9){
        return Math.floor((num/10000)*10)/10 + "万";
      }else{
        return num;
      }
    },
    formatDate (datetime) {
      let date = new Date(datetime);
      if (datetime >= 100000000000) {
        let date = new Date(datetime);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let sdate = date.getDate();
        let result = year + "年"+ month +"月"+ sdate + "日";
        return result;
      }else{
        let minute = ("0" + date.getMinutes()).slice(-2);
        let second = ("0" + date.getSeconds()).slice(-2);
        let result = minute +":" + second;
        return result;
      }
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../public/Xicon/iconfont.css";

// 播放器
.player_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 56vw;
  overflow: hidden;
  background-color: #000;
  z-index: 999;
}
.details_content {
  margin: calc(56vw + 15px) 15px 15px;
  font-size: 12px;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .left {
      display: flex;
      align-items: center;
      > span {
        display: inline-block;
        border: 1px solid rgb(255, 48, 48);
        padding: 0 3px;
        height: 13px;
        line-height: 10px;
        vertical-align: top;
        font-size: 12px;
        color: rgb(255, 48, 48);
      }
      > p {
        margin-left: 10px;
        font-size: 16px;
        letter-spacing: 1px;
        max-width: calc(100vw - 100px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    > i {
      font-size: 20px;
    }
  }
  .middle {
    color: rgb(80, 125, 175);
    margin: 10px 0;
  }
  .bottom {
    color: #aaa;
    > span {
      margin-right: 40px;
    }
  }
  .mv_introduction {
    font-size: 13px;
    // text-indent: 2em;
    line-height: 1.6em;
    margin-top: 8px;
    color: #666;
  }
}
.recommend_box {
  font-size: 12px;
  margin-bottom: 10px;
  > p {
    background-color: #eee;
    padding: 4px 15px;
    margin-bottom: 10px;
  }
  .recommend_content {
    margin: 4px 15px;
    display: flex;
    .img_box {
      height: 60px;
      width: 94px;
      border-radius: 2px;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .txt_content {
      height: 66px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(100vw - 120px);
      margin-left: 10px;
      border-bottom: 1px solid #ddd;
      box-sizing: content-box;
      > p {
        font-size: 14px;
        line-height: 1.2em;
        max-width: calc(100vw - 120px);
        > span {
          display: inline-block;
          border: 1px solid rgb(255, 48, 48);
          padding: 0 2px;
          height: 11px;
          line-height: 8px;
          vertical-align: top;
          font-size: 12px;
          color: rgb(255, 48, 48);
          margin: 2px 8px 0 0;
        }
      }
      > span {
        margin-top: 4px;
        color: #aaa;
      }
    }
  }
}

.comment_box {
  font-size: 12px;
  > p {
    background-color: #eee;
    padding: 4px 15px;
    margin-bottom: 10px;
  }
  .comment {
    display: flex;
    margin: 15px;
    .head_photo {
      >.img_box{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
        overflow: hidden;
      >img{
        width: 100%;
        height: 100%;
      }
      }
      
    }
    .comment_details {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid rgba(0,0,0,.1);
      padding-bottom: 14px;
      width: calc(100vw - 70px);
      .name_time_like_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name_time_box {
          height: 34px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-end;
          font-size: 14px;
          color: #666;
          margin-right: 29px;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-box-flex: 1;
          flex: auto;
          > span {
            height: 14px;
            line-height: 14px;
            font-size: 9px;
            color: #999;
          }
        }
        .like_box {
          font-size: 11px;
          color: #999;
          > span {
            margin-right: 5px;
          }
        }
      }
      .comment_content {
        margin-top: 6px;
        color: #333;
        font-size: 15px;
      }
    }
    .del_border{
      border-bottom: none;
    }
  }
  .comments_sum{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 15px;
    font-size: 14px;
    color: #999;
    >i{
      margin-left: 5px;
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
